<template>
  <view class="login_content">
    <view class="logo_box">
      <view>
        食谱雅集
      </view>
    </view>
    <view class="login_form_box">
      <view class="form">
        <view class="input_box">

          <input class="" type="text" clearable focus v-model="account" placeholder="请输入账号"/>

        </view>
        <view class="input_box">
          <input class="" type="password" v-model="password" placeholder="请输入密码"/>
        </view>
        <view class="loginBtn" @tap="bindLogin">
          <text class="btnvalue" >登录</text>
        </view>
        <view class="registBtn">
          <text class="regist" @tap="gotoregist">去注册</text>

        </view>

      </view>
    </view>

  </view>
</template>

<script>

import {set} from '@/utils/local'
import {
  login
} from '@/api/user'

import {
  mapState,
  mapMutations
} from 'vuex'
import mInput from '../../components/m-input.vue'

export default {
  components: {
    mInput
  },
  data() {
    return {
      providerList: [],
      hasProvider: false,
      account: 'song111',
      password: '123456',
    }
  },
  computed: mapState(['forcedLogin']),
  methods: {
    ...mapMutations(['login']),



    gotoregist() {
      uni.navigateTo({
        url: "/pages/register/register"
      })
    },
    bindLogin() {
      if (this.account.length < 5) {
        uni.showToast({
          icon: 'none',
          title: '账号最短为 5 个字符'
        });
        return;
      }
      if (this.password.length < 6) {
        uni.showToast({
          icon: 'none',
          title: '密码最短为 6 个字符'
        });
        return;
      }

      const data = {
        account: this.account,
        password: this.password
      };

      login(data).then(res => {
        console.log(res)
       if (res.code ==="200"){
         set("token", res.data)
         uni.showToast({
           icon: 'none',
           title: '登录成功',
         })
         setTimeout(()=>{
           uni.switchTab({
             url: '../my/my'
           })
         },500)

       }else {
         uni.showToast({
           icon: 'none',
           title: res.message
         })
       }

      })
    },

  }
}
</script>

<style>

.login_content {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(180deg, #E9A06F 0%, #f6d365 100%);
}


.logo_box {
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: white;
  font-weight: bold;
  font-family: "楷体", serif;
  margin-top: 100rpx;
  margin-bottom: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;

}

.login_form_box{
  height: 70%;
  margin: 16rpx;
  padding-top: 100rpx;
  border-radius: 20rpx;

  background: rgba(255,255,255,1);
}

.form {
  padding: 0 30upx;

}

.input_box {
  width: 100%;
  border-radius: 20upx;
  height: 100rpx;
  border: 1px solid #8d8d8d;;
  box-sizing: border-box;
  padding: 0 20upx;
  margin-top: 25upx;
}
.input_box input{
  height: 100rpx;
}

.loginBtn {
  width: 100%;
  height: 90upx;
  background: #E9A06F;
  border-radius: 20upx;
  color: #ececec;
  margin-top: 50upx;
  display: flex;
  justify-content: center;
  align-items: center;

}

.registBtn {
  text-align: end;
  color: #0060ed;
  font-size: 30upx;
  margin-top: 30upx;
}
</style>
